<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Private Assistant</title>
    <style>
        :root {
            --primary: #2563eb;
            --bg: #f8fafc;
            --user-bubble: var(--primary);
            --ai-bubble: #fff;
            --input-border: #e2e8f0;
            --input-focus: #93c5fd;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .chat-box {
            height: calc(100vh - 300px);
            min-height: 300px;
            overflow-y: auto;
            padding: 20px;
            scroll-behavior: smooth;
            overscroll-behavior-y: contain;
            -webkit-overflow-scrolling: touch;
            /* 自定义滚动条样式 */
            scrollbar-width: thin;
            scrollbar-color: var(--primary) #f1f1f1;
        }

        /* 自定义滚动条样式 - Chrome/Safari */
        .chat-box::-webkit-scrollbar {
            width: 8px;
        }

        .chat-box::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .chat-box::-webkit-scrollbar-thumb {
            background-color: var(--primary);
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .chat-box {
                height: calc(100vh - 250px);
                padding: 10px;
            }

            .container {
                padding: 10px;
            }
        }

        @media (max-height: 600px) {
            .chat-box {
                height: calc(100vh - 200px);
            }
        }

        .message {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
        }

        .message {
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 24px;
        }

        .user-message {
            flex-direction: row-reverse;
        }

        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-message .avatar {
            background: var(--primary);
        }

        .bubble {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 16px;
            line-height: 1.5;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .user-bubble {
            background: var(--user-bubble);
            color: white;
            border-radius: 12px 12px 0 12px;
        }

        .ai-bubble {
            background: var(--ai-bubble);
            border: 1px solid #eee;
            border-radius: 12px 12px 12px 0;
        }

        .typing-indicator {
            display: none;
            padding: 16px;
            background: var(--ai-bubble);
            border-radius: 12px;
            margin: 10px 0;
        }

        .input-area {
            display: flex;
            gap: 10px;
            padding: 20px;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }

        #user-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            outline: none;
        }

        button {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
        }

        .model-selector {
            margin-bottom: 12px;
        }

        #modelSelect {
            width: 200px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }

        #reasoningBtn {
            margin-left: 8px;
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid #2563eb;
            background: #fff;
            color: #2563eb;
            cursor: pointer;
            transition: all 0.2s;
        }

        #reasoningBtn:hover {
            background: #2563eb1a;
        }

        #reasoningBtn.active {
            background: #2563eb;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div style="margin-bottom: 20px;">
            <a href="speechcraft.html" style="color: var(--primary); text-decoration: none; font-weight: 500;">话术管理</a>
        </div>
        <div class="api-settings" style="margin-bottom: 20px; display: flex; gap: 10px; align-items: center;">
            <input type="text" id="apiUrl" value="http://127.0.0.1:8888" placeholder="API地址" style="
                flex: 1;
                padding: 8px 12px;
                border: 1px solid var(--input-border);
                border-radius: 8px;
                outline: none;
                transition: border-color 0.2s;
            ">
            <button onclick="saveApiUrl()" style="
                background: var(--primary);
                color: white;
                border: none;
                padding: 8px 16px;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s;
            ">保存</button>
        </div>
        <h1>AI 助手</h1>
        <div class="chat-box" id="chat-box"></div>
        <div class="typing-indicator" id="typing">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <div class="model-selector">
            <select id="modelSelect">
                <!-- 模型列表将通过API动态加载 -->
            </select>
            <button id="reasoningBtn" onclick="toggleReasoning()" style="display: none;">深度思考</button>
        </div>
        <div class="input-area">
            <input type="text" id="user-input" placeholder="输入您的问题..." autocomplete="off"
                onkeypress="if(event.keyCode === 13) sendMessage()">
            <button onclick="sendMessage()" onmouseover="this.style.transform='scale(1.05)'"
                onmouseout="this.style.transform='scale(1)'">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
                </svg>
                发送
            </button>

        </div>
    </div>

    <script>
        let reasoningEnabled = false;
        let apiBaseUrl = 'http://127.0.0.1:8888';

        function saveApiUrl() {
            const urlInput = document.getElementById('apiUrl');
            apiBaseUrl = urlInput.value;
            alert('API地址已更新为: ' + apiBaseUrl);
        }

        // 页面加载时获取模型列表
        window.addEventListener('DOMContentLoaded', () => {
            fetch(`${apiBaseUrl}/v1/ai/models`)
                .then(response => response.json())
                .then(data => {
                    const select = document.getElementById('modelSelect');
                    console.log(data);
                    data.data.models.forEach(model => {
                        const option = document.createElement('option');
                        option.value = model.name;
                        option.textContent = model.name;
                        select.appendChild(option);
                    });
                });
        });

        function toggleReasoning() {
            const btn = document.getElementById('reasoningBtn');
            reasoningEnabled = !reasoningEnabled;
            btn.style.backgroundColor = reasoningEnabled ? '#2563eb' : '#fff';
            btn.style.color = reasoningEnabled ? '#fff' : '#2563eb';
        }

        function sendMessage() {
            const input = document.getElementById("user-input");
            const message = input.value.trim();
            if (!message) return;

            const model = document.getElementById('modelSelect').value;
            const payload = {
                model: model,
                prompt: message
            };

            if (model.includes('qwen3')) {
                payload.reasoning = reasoningEnabled;
            }

            const chatBox = document.getElementById("chat-box");
            // 添加用户消息
            const userMessage = document.createElement('div');
            userMessage.className = 'message user-message';
            userMessage.innerHTML = `
    <div class="avatar">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" fill="white">
            <path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z"/>
        </svg>
    </div>
    <div class="bubble user-bubble">
        ${message}
    </div>
`;
            chatBox.appendChild(userMessage);
            input.value = "";

            fetch(`${apiBaseUrl}/v1/ai/chat`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    message: message,
                    model: document.getElementById('modelSelect').value,
                    reasoning: reasoningEnabled
                })
            })
                .then(response => response.json())
                .then(data => {
                    // 添加消息带动画
                    const aiMessage = document.createElement('div');
                    aiMessage.style.opacity = '0';
                    aiMessage.style.transform = 'translateY(20px)';
                    setTimeout(() => {
                        aiMessage.style.opacity = '1';
                        aiMessage.style.transform = 'translateY(0)';
                    }, 10);
                    aiMessage.className = 'message ai-message';
                    aiMessage.innerHTML = `
    <div class="avatar">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" fill="#4b5563">
            <path d="M20 11H4V8h16m0 5H4v-2h16m-7-9l4 4h-3v6h-2V7h-3l4-4z"/>
        </svg>
    </div>
    <div class="bubble ai-bubble">
        ${data.data.content}
    </div>
`;
                    chatBox.appendChild(aiMessage);
                    // 平滑滚动到底部
                    chatBox.scrollTo({
                        top: chatBox.scrollHeight,
                        behavior: 'smooth'
                    });
                });
        }
        document.getElementById('modelSelect').addEventListener('change', function () {
            document.getElementById('reasoningBtn').style.display =
                this.value.includes('qwen3') ? 'inline-block' : 'none';
            reasoningEnabled = false;
            document.getElementById('reasoningBtn').style.backgroundColor = '#fff';
        });

        // 在DOM加载完成后手动触发一次change事件以确保初始状态正确
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('modelSelect').dispatchEvent(new Event('change'));
        });
    </script>
</body>

</html>